Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at how to create templates with Vue 3.
Raw HTML
We can render raw HTML with the v-html directive.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>{{ rawHtml }}</p>
<p><span v-html="rawHtml"></span></p>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
rawHtml: `<b>foo</b>`
};
}
}).mount("#app");
</script>
</body>
</html>
We have the rawHtml property returned with the object we return in the data method.
If we pass raw HTML into the mustache, it’ll be sanitized. This means the raw code will be displayed.
If we pass it into the v-html directive, it’ll be displayed as HTML, so it’ll be bold.
Therefore, if we use v-html , we should be careful of cross-site scripting vulnerabilities.
We should only display trusted content with v-html .
Attributes
If we want to set attribute values dynamically, we’ve to use the v-bind directive.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-bind:id="dynamicId"></div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
dynamicId: `foo`
};
}
}).mount("#app");
</script>
</body>
</html>
to set the id attribute of the div to foo by using v-bind .
If we have boolean attributes, its existence means we set the value totrue .
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<button v-bind:disabled="disabled">Button</button>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
disabled: true
};
}
}).mount("#app");
</script>
</body>
</html>
We disabled the button by passing in the disabled value to v-bind:disabled , which is true .
JavaScript Expressions
We can put JavaScript expressions between the double curly braces.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{message.split('').reverse().join('')}}
</div>
<script>
const vm = Vue.createApp({
data() {
return {
message: "hello world"
};
}
}).mount("#app");
</script>
</body>
</html>
to reverse 'hello world' in the template.
We can only put in single expressions and not statements, so we can’t write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{ var a = 1 }}}
</div>
<script>
const vm = Vue.createApp({
data() {
return {
message: "hello world"
};
}
}).mount("#app");
</script>
</body>
</html>
The Vue template compiler will give us an error.
Directives
Directives are special attributes that starts with v- .
The values they expect are single JavaScript expressions.
v-for and v-on are exceptions to this.
We reactively apply the side effects to the DOM when the value of its expression changes.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p v-if="show">hello world</p>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
show: true
};
}
}).mount("#app");
</script>
</body>
</html>
to show the ‘hello world’ message with v-if since show is true .
v-if is a directive that shows something when its value is truthy.
Conclusion
Templates can have raw HTML, attributes, and directives.
Directives are special attributes that take values.
